<template>
    <div class="grid_board--wrap">
        <div class="left_board">
            <div class="survivor_container">
                <div class="logo">
                    <img :src="teamInfo[gameInfo.survivorTeam].logo">
                </div>
                <div class="team_info">
                    <p class="team_title">{{ teamInfo[gameInfo.survivorTeam].teamName }}</p>
                    <div class="score_info">
                        <p>W{{ gameInfo[`${gameInfo.survivorTeam}Score`].win }}</p>
                        <p>D{{ gameInfo[`${gameInfo.survivorTeam}Score`].down }}</p>
                    </div>
                </div>
                <p class="big_score">
                    {{ gameInfo[`${gameInfo.survivorTeam}Score`].smallScore }}
                </p>
            </div>
        </div>
        <div class="map_board"></div>
        <div class="right_board">
            <div class="hunter_container">
                <p class="big_score">
                    {{ gameInfo[`${gameInfo.hunterTeam}Score`].smallScore }}
                </p>
                <div class="team_info">
                    <p class="team_title">{{ teamInfo[gameInfo.hunterTeam].teamName }}</p>
                    <div class="score_info">
                        <p>W{{ gameInfo[`${gameInfo.hunterTeam}Score`].win }}</p>
                        <p>D{{ gameInfo[`${gameInfo.hunterTeam}Score`].down }}</p>
                    </div>
                </div>
                <div class="logo">
                    <img :src="teamInfo[gameInfo.hunterTeam].logo">
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts' name="ScoreBoard">
import storeHelper from '@/utils/TauriStore';
import BoardChannel from '@/utils/boardChannel';
const channel = new BoardChannel('bp-system');
const teamInfo = reactive<TeamInfo>({
    team1: {
        logo: '',
        teamName: '',
        survivor: [],
        hunter: ''
    },
    team2: {
        logo: '',
        teamName: '',
        survivor: [],
        hunter: ''
    }
});
const gameInfo = reactive<GameInfo>({
    banMap: null,
    pickMap: null,
    survivorTeam: 'team1',
    hunterTeam: 'team2',
    team1Score: {
        win: 0,
        down: 0,
        lose: 0,
        smallScore: 0,
        gloalban: []
    },
    team2Score: {
        win: 0,
        down: 0,
        lose: 0,
        smallScore: 0,
        gloalban: []
    }
});
const _init = async () => {
    try {
        const teams = await storeHelper.get('teamInfo');
        const gameStoreInfo = await storeHelper.get('gameInfo');
        if (typeof gameStoreInfo === 'object') {
            Object.assign(gameInfo, gameStoreInfo);
        }
        if (typeof teams === 'object') {
            Object.assign(teamInfo, teams);
        }
    } catch (error) {
        console.log(error);
    }
}
onMounted(() => {
    _init();
    channel.on('teamInfoChange', async (bool: boolean) => {
        if (bool) {
            _init();
        }
    });
    channel.on('gameInfoChange', (info: IncSessionGameInfo) => {
        Object.assign(gameInfo, info);
    })
});
</script>
<style scoped lang='scss'>
$team-Size:16px;
$big-Score-Size:42px;
.grid_board--wrap {
    display: grid;
    grid-template-columns: 200px auto 200px;
    width: 100%;
    height: 100vh;

    .map_board {
        background: $screen-color;
    }

    .left_board {
        height: 100%;
        width: 100%;
        background: url('@/assets/images/scoreLeft.png');
        background-size: cover;

        .survivor_container {
            display: grid;
            grid-template-columns: 30% 45% 25%;
            align-items: center;
            color:#E7E7E7;

            .logo {
                width: 100%;
                height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;

                img {
                    height: 50px;
                    width: 50px;
                }
            }

            .team_info {
                height: 100vh;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                font-size: $team-Size;
                font-weight: bolder;

                .team_title {
                    width: 100%;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                    text-align: center;
                }

                .score_info {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 12px;
                }
            }

            .big_score {
                font-size: $big-Score-Size;
                font-weight: bolder;
                text-align: center;
            }
        }
    }

    .right_board {
        height: 100%;
        width: 100%;
        background: url('@/assets/images/scoreRight.png');
        background-size: cover;
        color:#E7E7E7;
        .hunter_container {
            display: grid;
            grid-template-columns: 25% 45% 30%;
            align-items: center;
            .logo {
                width: 100%;
                height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;

                img {
                    height: 50px;
                    width: 50px;
                }
            }

            .team_info {
                height: 100vh;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                font-size: $team-Size;
                font-weight: 600;

                .team_title {
                    width: 100%;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                    text-align: center;
                }

                .score_info {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 12px;
                }
            }

            .big_score {
                font-size: $big-Score-Size;
                font-weight: bolder;
                text-align: center;
            }
        }
    }
}
</style>